<template>
  <div v-model="reload">
  <el-menu
    :default-active="'/goodsManagement'"
    router
    class="func-menu"
    mode="vertical"
    style="width: 100%;height: 92vh;float: left"><!--侧边导航栏需要添加float：left属性-->
    <el-menu-item
      class="func-menu-item"
      v-for="(item,i) in navList"
      :key="i"
      style="padding: 0"
      :disabled="!item.isAllow.value"
      :index="item.name">
      <template slot="title" >
        <el-tooltip
          :disabled="item.isAllow.value"
          :content="item.isAllow.meaning">
          <div v-if="isFord" class="frozen-btn" >
            <el-button
              type="primary"
              @click="handleActive(item.name)"
              :class="['dazzle-button', active==item.name?'purple':'green','nav-menu-func-btn']"
              :disabled="!item.isAllow.value"
            >{{item.navItem}}</el-button>
          </div>
          <i v-else :class="item.icon"></i>
        </el-tooltip>
      </template>
    </el-menu-item>
  </el-menu>
  </div>
</template>

<script>
  export default {
    name: "NavMenuFunc",
    props:['isFord'],
    data(){
      return{
        reload:false,
        staff:{},
        isOnline:false,
        navList:[],
        active:'/index',
      }
    },
    watch:{
      '$store.state.staff.isOnline':function (){
        this.isOnline=this.$store.state.staff.isOnline;
        console.log(this.isOnline)
        if(this.isOnline){
          this.navList=this.getNav();
        }
      }
    },
    methods:{
      handleActive(path){
        this.active=path;
      },
      getNav(){
        this.reload=!this.reload;
        return [
          {icon:'el-icon-takeaway-box',name:'/goodsManagement',navItem:'商品管理',isAllow:this.passAble('/goodsManagement')},
          {icon:'el-icon-truck',name:'/purchaseControl',navItem:'进货管理',isAllow:this.passAble('/purchaseControl')},
          {icon:'el-icon-user',name:'/salesManagement',navItem:'销售管理',isAllow:this.passAble('/salesManagement')},
          {icon:'el-icon-office-building',name:'/inventoryManagement',navItem: '库存管理',isAllow:this.passAble('/inventoryManagement')},
          {icon:'el-icon-date',name:'/statementManagement',navItem:'统计报表',isAllow:this.passAble('/statementManagement')},
          {icon:'el-icon-setting',name:'/setting',navItem:'系统设置',isAllow:this.passAble('/setting')},
        ]
      },
      passAble(name){
        let permission={
          value:true,
          meaning: '通过',
        }
        switch (name){
          case '/purchaseControl':
            permission=this._func.isAllow(this._mytype.permission.Ppurchase,this);
            break;
          case '/salesManagement':
            permission=this._func.isAllow(this._mytype.permission.Pplan,this);
            break;
          case'/statementManagement':
            permission=this._func.isAllow(this._mytype.permission.Pplan,this);
            break;
          default:break
        }
        return permission;
      }
    },
    created() {
      this.isOnline = this.$store.state.staff.isOnline;
      console.log(this.isOnline)
      if (this.isOnline) {
        this.staff = {
          ...this.$store.state.staff
        }
      }
      this.navList=this.getNav();
    }
  }
</script>
<style src="../../assets/css/navBtn.scss" scoped>
.func-menu-item{
  width: 100%;
  height:10vh;
  margin: 0;
}
body{
  margin: 0;
  padding: 0;
}
</style>
